<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>canvas 三次贝塞尔曲线</title>
<style>
    body { background: url("/icon.png") repeat; }
    #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
</style>
</head>

<body>
<div id="canvas-warp">
    <canvas id="canvas">
        你的浏览器居然不支持Canvas? 
    </canvas>
</div>

<script>
window.onload = function() {
    var canvas = document.getElementById("canvas");
    canvas.width = 800;
    canvas.height = 600;
    var context = canvas.getContext("2d");
    context.fillStyle = "#fff";
    context.fillRect(0, 0, 800, 600);

    context.beginPath();
    context.lineWidth = 6;
    context.strokeStyle = "red";

    /*
    三次贝塞尔曲线有
    1个起始点、
    1个终止点、
    2个控制点。
    因此传入的6个参数分别为：
    控制点cp1 (cp1x, cp1y)，
    控制点cp2 (cp2x, cp2y)，
    与终止点 (x, y)。

    通常搭配moveTo()或lineTo()使用。
    moveTo()或lineTo()设置起始点；
    */
    //    尝试链接
    //    http://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html
    //友情提示：在chrome浏览器中 F12打开 随便选中一个节点，写个样式：animation: linear;
    //然后点击linear旁边的贝塞尔曲线图标，自由调节贝塞尔控制点，确定后可以看到数值

    // context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
    context.moveTo(100, 200);
    context.bezierCurveTo(200, 100, 300, 300, 400, 200);


    context.stroke();
}
</script>
</body>

</html>